<template>
  <div>
    <window
      :show="windowConfig.show"
      :buttons="windowConfig.buttons"
      :showCancer="windowConfig.showCancer"
      @close="closeWindow"
    >
      <el-row :gutter="10">
        <el-col :span="10">
          <el-card>
            <div class="custom-title">专题</div>
            <el-scrollbar :height="specialListHeight + 'px'">
              <div class="special-blog-tree custom-content">
                <el-tree
                  class="tree-panel"
                  ref="refTree"
                  :data="blogList"
                  default-expand-all
                  node-key="blogId"
                  :expand-on-click-node="false"
                  :props="treeProps"
                  :highlight-current="true"
                  @node-click="treeClick"
                >
                  <template #default="{ node, data }">
                    <span class="custom-node-style">
                      <!-- {{ data }} -->
                      <span class="node-title">
                        <span
                          v-if="data.status == 0"
                          :style="{ color: 'red' }"
                          >{{ data.title }}</span
                        >
                        <span v-else :style="{ color: 'green' }">{{
                          data.title
                        }}</span>
                      </span>
                    </span>
                  </template>
                </el-tree>
              </div>
            </el-scrollbar>
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-card
            :body-style="{
              height: contentHeight + 'px',
            }"
          >
            <div v-if="blog.title">
              <div class="custom-title">{{ blog.title }}</div>
              <div class="custom-content" v-html="blog.content"></div>
            </div>
            <div v-else class="no-content" :style="{ marginTop: '37px' }">
              请选择专题文章
            </div>
          </el-card>
        </el-col>
      </el-row>
    </window>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getCurrentInstance,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
} from "vue";
import hljs from "highlight.js";
import "highlight.js/styles/github.css";
// import 'highlight.js/styles/default.css'
const api = {
  getBlogDetail: "/blog/getBlogById",
  getSpecialInfo: "/blog/getSpecialInfo",
};
const { proxy } = getCurrentInstance();
const blog = ref({});
const specialListHeight = ref(null);
const contentHeight = ref(null);

const init = (data) => {
  specialListHeight.value = window.innerHeight - 333;
  console.log(specialListHeight.value);
  windowConfig.show = true;
  // console.log(data);
  nextTick(() => {
    showBlogDetail(data.blogId);
    loadSpecialTree(data);
    let blocks = document.querySelectorAll("pre code");
    blocks.forEach((block) => {
      hljs.highlightBlock(block);
    });
  });
};

defineExpose({ init });

const handleMouseMove = () => {
  specialListHeight.value = window.innerHeight - 333;
  contentHeight.value = specialListHeight.value + 127;
};

onMounted(() => {
  // 添加全局鼠标移动事件监听器
  window.addEventListener("mousemove", handleMouseMove);
});

// onMounted(() => {
//   const blocks = document.querySelectorAll('pre code');
//   blocks.forEach((block) => {
//     hljs.highlightBlock(block);
//   });
// });

const windowConfig = reactive({
  show: false,
  title: "标题",
  showCancer: false,
  buttons: [
    {
      type: "danger",
      text: "确定",
      click: (e) => {
        closeWindow();
      },
    },
  ],
});

const showBlogDetail = async (blogId) => {
  specialListHeight.value = window.innerHeight - 333;
  let result = await proxy.Request({
    url: api.getBlogDetail,
    params: {
      blogId: blogId,
    },
  });
  if (!result) {
    return;
  }
  blog.value = result.data;
};

const emit = defineEmits();
const closeWindow = () => {
  windowConfig.show = false;
  emit("callback", blog.value);
};

const treeProps = {
  children: "children",
  label: "title",
  value: "blogId",
};

const blogList = ref({});

// 获取专题文章树
// 行点击事件默认就会带有行的信息
const refTree = ref(null);
const loadSpecialTree = async (data) => {
  // console.log(data);
  // tableDataRef.value.setCurrentRow(data);
  let categoryId = data.categoryId;
  let result = await proxy.Request({
    url: api.getSpecialInfo,
    params: {
      categoryId: categoryId,
      showType: 1,
    },
  });
  if (!result) return;
  blogList.value = result.data;
  nextTick(() => {
    refTree.value.setCurrentKey(data.blogId);
  });

  ElMessage.success("获取专题成功");
};

const treeClick = (data) => {
  // console.log(data)
  if (data.blogId === "0") {
    blog.value.title = null;
    return;
  }
  showBlogDetail(data.blogId);
};
</script>

<style lang="scss" scoped>
/* 基本标题样式 */
.custom-title {
  font-family: "Arial", sans-serif; /* 设置字体 */
  font-size: 2.5em; /* 设置字体大小 */
  color: #333; /* 设置字体颜色 */
  text-align: center; /* 文本居中 */
  margin: 7px auto; /* 上下外边距 */
  padding: 10px 20px; /* 内边距 */
  border-bottom: 2px solid #666; /* 底部边框 */
  text-transform: uppercase; /* 文本大写 */
  letter-spacing: 2px; /* 字母间距 */
  max-width: 800px; /* 最大宽度 */
  font-weight: bold; /* 加粗 */
  //   background-color: #f0f0f0; /* 背景颜色 */
  //   border-radius: 8px; /* 圆角边框 */
  //   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 悬停效果 */
.custom-title:hover {
  color: #007bff; /* 悬停时改变颜色 */
  border-bottom-color: #007bff; /* 悬停时改变边框颜色 */
  //   background-color: #e0e0e0; /* 悬停时改变背景颜色 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

.custom-content {
  font-family: "Georgia", serif; /* 设置字体 */
  font-size: 1em; /* 设置字体大小 */
  color: #444; /* 设置字体颜色 */
  line-height: 1.6; /* 设置行高 */
  margin: 20px auto; /* 上下外边距，水平居中 */
  padding: 20px; /* 内边距 */
  min-height: calc(100vh - 360px);
  //   max-width: 800px; /* 最大宽度 */
  background-color: #fff; /* 背景颜色 */
  //   border: 1px solid #ddd; /* 边框 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  :deep(pre) {
    background-color: #f8f8f8; /* 背景颜色 */
    border-radius: 8px; /* 圆角边框 */
    padding: 16px; /* 内边距 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  }

  :deep(code) {
    font-family: "Courier New", Courier, monospace; /* 代码字体 */
  }
}

/* 段落样式 */
.custom-content p {
  margin-bottom: 15px; /* 段落下边距 */
  text-indent: 2em; /* 首行缩进 */
}

/* 链接样式 */
.custom-content a {
  color: #007bff; /* 链接颜色 */
  text-decoration: none; /* 去掉下划线 */
}

.custom-content a:hover {
  text-decoration: underline; /* 悬停时下划线 */
}

/* 列表样式 */
.custom-content ul,
.custom-content ol {
  margin-left: 30px; /* 列表左边距 */
  margin-bottom: 15px; /* 列表下边距 */
}

/* 标题样式 */
.custom-content h1,
.custom-content h2,
.custom-content h3,
.custom-content h4,
.custom-content h5,
.custom-content h6 {
  color: #333; /* 标题颜色 */
  margin-top: 20px; /* 标题上边距 */
  margin-bottom: 10px; /* 标题下边距 */
}

/* 图片样式 */
.custom-content :deep(img) {
  max-width: 90%; /* 图片最大宽度 */
}
</style>
